/*初始化函数*/
function init() {
    let layer = layui.layer;
    let init_blog_id = getQueryVariable("id");
    if (init_blog_id === false) {
        window.location.href = "/blog/index.html";
        return false;
    }
    // 0.0 判断屏幕宽度，调整页面内容大小
    if (window.screen.width <= 768) {
        $("#main_content").css("padding", "6em 0 10em 0").css("width", "100%");
    }
    // 0.1 加载博客
    $.get("/blog/info", {
        "id": init_blog_id,
        "published": true
    }, function (result) {
        if (result.code === 200) {
            /*标题*/
            $("h1[name='title']").html(result.data.title);
            /*博客信息*/
            $("#blog_info img[name='head_portrait_url']").attr("src", result.data.createUser.headPortraitUrl);
            $("#blog_info span[name='username']").html(result.data.createUser.username);
            $("#blog_info span[name='publish_date']").html(result.data.publishDate);
            $("#blog_info span[name='view_times']").html(result.data.viewTimes);
            $("#blog_info button[name='type_id']").html(result.data.typeName).attr("value", result.data.typeId);
            $("#blog_info button[name='create_flag']").html(result.data.createFlag).attr("value", result.data.createFlag);

            /*博客的标签信息*/
            let html_str = "";
            $.each(result.data.tagList, function (i, n) {
                html_str += '<div class="layui-col-md2 layui-col-xs4" style="text-align: center">';
                html_str += '<button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs" name="tag_id" value="' + n.id + '" ';
                html_str += ' onclick="window.location.href=\'/blog/blog_tag.html?id=' + n.id + '\'">' + n.name + '</button>';
                html_str += '</div>';
            })
            $("#blog_tagList").html(html_str);

            /*博客内容*/
            //$("#content-markdown-view textarea").html(result.data.content);
            editor_markdownToHTML(result.data.content);//渲染博客内容
            grabHeader();//捕获标题
            getTypo();
            increase_viewTimes(init_blog_id);// 开启计时事件
        } else layer.msg(result.msg, {icon: 5});
    })

    // 0.2 加载评论
    pageList(init_blog_id, 1, 5, true);

    // 2.暂时先用另一个页面展示内容
    window.setTimeout(function () {
        if (window.confirm("切换到博客内容页面?")) {
            window.open("/blog/minDemo.html?id="+init_blog_id)
        }
    }, 1000);
}

layui.use(['layer', 'form', 'laypage'], function () {
    let layer = layui.layer, form = layui.form,
        $ = layui.$;
    let init_blog_id = getQueryVariable("id");
    if (init_blog_id === false) {
        window.location.href = "/blog/index.html";
        return false;
    }
    // 1.赞赏按钮
    $("#appreciate_btn").click(function () {
        let $appreciate_div = $("#appreciate_div");
        if ($appreciate_div.hasClass('layui-hide'))
            $appreciate_div.removeClass('layui-hide');
        else
            $appreciate_div.addClass('layui-hide');
    })

    // 2.评论
    form.on('submit(form_submit)', function (data) {
        //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        let token = localStorage.getItem("token");
        if (token === null) {
            layer.msg("请登录之后再评论", {icon: 5});
            return false;
        }
        let insert_load_index = layer.load(1);
        $.post("/blog/comment", {
            "token": localStorage.getItem("token"),
            "content": $.trim($("textarea[name='comment_content']").val()),
            "blog_id": init_blog_id
        }, function (result) {
            if (result.code === 200) {
                let html_str = "";
                html_str += '<div class="layui-row layui-col-space4">';
                html_str += '<div class="layui-col-md2 layui-col-xs4">';
                html_str += '<img class="layui-nav-img" src="' + result.data.createUser.headPortraitUrl + '" alt="">';
                html_str += '<span class="layui-font-blue">' + result.data.createUser.username + '</span></div>';
                html_str += '<div class="layui-col-md2 layui-col-xs3"><i class="layui-icon layui-icon-date"></i>' + result.data.createTime + '</div></div>';
                html_str += '<div class="layui-row" style="padding: 0 2em 1em 2em">';
                html_str += '<p>' + result.data.content + '</p></div>';
                $("#comment_list").prepend(html_str);
                $("#reset_btn").click();//清空值
            } else if (result.code === 401) layer.msg("身份信息已经过期，请重新登录", {icon: 5});
            else layer.msg(result.msg, {icon: 5});
            layer.close(insert_load_index);
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

    // 开始初始化
    init();

});

/*评论分页的函数*/
function pageList(blog_id, page_no, page_size, isRender) {
    let layer = layui.layer;
    $.get("/blog/comment/info", {
        "blog_id": blog_id,
        "page_no": page_no,
        "page_size": page_size
    }, function (result) {
        if (result.code === 200) {
            let html_str = "";
            $.each(result.data, function (i, n) {
                html_str += '<div class="layui-row layui-col-space4">';
                html_str += '<div class="layui-col-md2 layui-col-xs4">';
                html_str += '<img class="layui-nav-img" src="' + n.createUser.headPortraitUrl + '" alt="">';
                html_str += '<span class="layui-font-blue">' + n.createUser.username + '</span></div>';
                html_str += '<div class="layui-col-md2 layui-col-xs3"><i class="layui-icon layui-icon-date"></i>' + n.createTime + '</div></div>';
                html_str += '<div class="layui-row" style="padding: 0 2em 1em 2em">';
                html_str += '<p>' + n.content + '</p></div>';
            })
            $("#comment_list").html(html_str);
            if (isRender) {
                let laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'comment_page', //注意，这里的 test1 是 ID，不用加 # 号
                    count: result.total, //数据总数，从服务端得到
                    limit: 5,    //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                    theme: '#123456',//自定义主题
                    jump: function (obj, first) {//
                        // 当分页被切换时触发，函数返回两个参数：
                        // obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
                        //obj包含了当前分页的所有参数，比如：
                        //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        //console.log(obj.limit); //得到每页显示的条数

                        //首次不执行
                        if (!first) {
                            //do something
                            pageList(blog_id, obj.curr, obj.limit, false);
                        }
                    }
                });
            }
        } else layer.msg(result.msg, {icon: 5});
    })
}

/*增加观看次数的函数*/
function increase_viewTimes(blog_id) {
    // 设置20s增加一次观看次数
    setTimeout(function () {
        $.ajax({
            url: "/blog/viewTimes",
            method: "PUT",
            data: {"id": blog_id},
            dataType: "JSON",
            success: function (result) {
                if (result.code === 200) {
                    $("#blog_info span[name='view_times']").html(result.data);
                } else layui.layer.msg(result.msg, {icon: 5});
            }
        })
    }, 1000 * 20);//20s加一次观看次数
}

/*渲染markdown到html 的函数*/
function editor_markdownToHTML(markdown) {
    testEditormdView = editormd.markdownToHTML("content-markdown-view", {
        markdown: markdown,//+ "\r\n" + $("#append-test").text(),
        //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
        htmlDecode: "style,script,iframe",  // you can filter tags decode
        //toc             : false,
        //tocm            : true,    // Using [TOCM]
        //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
        //gfm             : false,
        //tocDropdown     : true,
        // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
        //emoji           : true,
        //taskList        : true,
        //tex             : true,  // 默认不解析
        //flowChart       : true,  // 默认不解析
        //sequenceDiagram : true,  // 默认不解析
    });
}

/*捕获标题的函数*/
function grabHeader() {
    setTimeout(function () {
        tocbot.init({
            // Where to render the table of contents.
            tocSelector: '.js-toc',
            // Where to grab the headings to build the table of contents.
            contentSelector: '.js-toc-content',
            // Which headings to grab inside of the contentSelector element.
            headingSelector: 'h1, h2, h3',
            // For headings inside relative or absolute positioned containers within content.
            hasInnerContainers: true,
        });
    }, 500);
}

/*引入typo.css的函数*/
function getTypo() {
    $("head").append('<link rel="stylesheet" href="/lib/typo/typo.css"/>');
}

/*获取url中的请求参数
* 如果成功：返回参数值
* 否则返回：false
* 缺陷：不能取出数组参数
*/
function getQueryVariable(variable) {
    let query = window.location.search.substring(1);
    let vars = query.split("&");
    for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    return false;
}